@import '../global';

/**
 * @global {color} [$toolbar-input-bg=#fff]
 * Background-color for toolbar form fields.
 *
 * @class Ext.form.Field
 * @xtype field
 */
$toolbar-input-bg: #fff !default;

/**
 * @global {color} [$toolbar-input-color=#000]
 * Text color for toolbar form fields.
 *
 * @class Ext.form.Field
 * @xtype field
 */
$toolbar-input-color: #000 !default;

/**
 * @global {measurement} [$toolbar-input-height=1.5em]
 * Text color for toolbar form fields.
 *
 * @class Ext.form.Field
 * @xtype field
 */
$toolbar-input-height: 1.5em !default;

/**
 * @global {color} [$toolbar-input-border-color=rgba(#000, .5)]
 * Border color for toolbar form fields.
 *
 * @class Ext.form.Field
 * @xtype field
 */
$toolbar-input-border-color: rgba(#000, .5) !default;

// Private
$toolbar-select-overflow-mask-width: 3em;
$toolbar-search-left-padding: 1.67em;

/**
 * Includes default toolbar form field styles.
 *
 * @class Ext.TabBar
 * @xtype tabbar
 */
@mixin sencha-toolbar-forms {

  @if $include-highlights {
    .x-android .x-toolbar {
      .x-input-text, .x-input-search, .x-input-number {
        -webkit-box-shadow: inset $toolbar-input-border-color 0 .1em .1em, inset $toolbar-input-border-color 0 -.1em .1em, inset $toolbar-input-border-color .1em 0 .1em, inset $toolbar-input-border-color -.1em 0 .1em, inset rgba(#000, .5) 0 .15em .4em;
      }
    }
  }

  .x-desktop .x-toolbar {
    .x-input-search {
      padding-left: ($toolbar-search-left-padding - .61em);
    }
  }

  .x-toolbar {
    .x-field {
      margin: .3em .5em;
      min-height: 0;
      border-bottom: 0;
      width: auto;
    }

    .x-input-text, .x-input-search, .x-input-number {
      @if $include-border-radius { @include border-radius(.3em); }
      @include background-clip(padding-box);
      height: $toolbar-input-height;
      color: lighten($toolbar-input-color, 43%);
      background-color: $toolbar-input-bg;
      min-height: 0;
      line-height: 1.3em;
      -webkit-appearance: none;
      padding: 0em .3em;
      margin: 0;

      @if $include-highlights {
        -webkit-box-shadow: inset $toolbar-input-border-color 0 .1em 0, inset $toolbar-input-border-color 0 -.1em 0, inset $toolbar-input-border-color .1em 0 0, inset $toolbar-input-border-color -.1em 0 0, inset rgba(#000, .5) 0 .15em .4em;
      }

      &:focus {
        color: $toolbar-input-color;
      }
    }

    .x-input-search, .x-field-select .x-input-text {
      padding: 0em .5em;
      @if $include-border-radius { @include border-radius($toolbar-input-height/2); }
    }

    .x-input-search {
      background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba($toolbar-input-bg,.6))), theme_image($theme-name, "pictos/search.png");
      -webkit-background-size: .83em .83em, .83em .83em;
      background-repeat: no-repeat;
      background-position: .5em 50%;
      padding-left: $toolbar-search-left-padding;
    }

    .x-field-select {
      &:after {
        top: -.5em;
        right: -.5em;
      }

      // Background is set in _toolbar file
      &:before {
        width: $toolbar-select-overflow-mask-width;
        border-left: none;
        @if $include-border-radius { @include border-right-radius($toolbar-input-height/2); }
        @if $include-highlights {
            -webkit-mask: theme_image($theme-name, "select_mask.png");
            -webkit-mask-position: right top;
            -webkit-mask-repeat: repeat-y;
            -webkit-mask-size: $toolbar-select-overflow-mask-width .05em;
        }
        @else {
            width: 0.5em !important;
        }
      }

      .x-input-text, &:before {
        -webkit-box-shadow: none;
      }

      .x-input-text {
        padding-right: 1.5em;
        display: block;
      }
    }
  }
}
